var str = location.href
var x = str.indexOf('=')
str = str.slice(x + 1)
console.log(str)
var bdlogin = getCookie('data')
var login = getCookie('login')
if (login) {
	$('#login').html(`<span>${login}</span>`)
	$('#regist').html(`<span>退出</span>`)
	$('#regist>span').click(function () {
		setCookie('login', 1, -180)
		location.reload()
	})
	var data = JSON.parse(localStorage.getItem('data1'))
	var x = data.reduce((pre, item) => {
		return pre + item.num * 1
	}, 0)
	$('#carr>a').html(`购物车(${x})`)
}
if (!login && bdlogin) {
	var data = JSON.parse(localStorage.getItem('data'))
	var x = data.reduce((pre, item) => {
		return pre + item.num * 1
	}, 0)
	$('#carr>a').html(`购物车(${x})`)
}
// 发送Ajax请求拿到数据
$.ajax({
	url: `/api/hisense/item/${str}/for-view`,
	type: 'get',
	success: function (res) {
		console.log(res)
		rander(res)
		swiper()
		fdj()
		addcar(res)
	},
})
// 渲染结构
function rander(res) {
	var promise = res.groupedOtherAttributes[0].otherAttributes
	var str = ` <div class="box">
            <div class="left">
             <div id='box'>
            <div class="show">
                <img src="https:${res.item.listMainImage}"/>
                <div class="mask"></div>
            </div>
            <div class="dw">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                 ${res.imageInfos
						.map(function (item) {
							return ` <div class="swiper-slide"><img src="https:${item.url}" alt=""></div>`
						})
						.join('')}
                </div>
                <div class="swiper-button-prev pre"></div>
                <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
                <div class="swiper-button-next nex"></div>
                <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
                <!-- Add Pagination -->
            </div>
            </div>
            <div class="enlarge"><img src="https://img.shop.hisense.com/2021/06/28/52f38983-ff98-405a-9b61-81aa04a03abd.png" alt=""></div>
              </div>
            </div>
            <div class="right">
             <h2>${res.item.name}</h2>
             <div class="hd">
             ${res.item.advertise}
             </div>
             <div class="cn">
                 <span>承诺</span>
                <div>
                ${promise
					.map((item) => {
						return `<span><img src="https:${item.image}" alt="">  <b>${item.attrKey}</b> </span>
                `
					})
					.join('')}
                 <span class="glyphicon glyphicon-chevron-down"></span>
                </div>
               
             </div>
             <div class="jg">
                 <span>￥<b>${res.highOriginPrice / 100}</b><span>已售${
		res.item.saleQuantity
	}台</span></span>
                <span>降价提醒</span>
             </div>
             <div class="dq">
                 地址
             </div>
             <p>选择数量</p>
               <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default red" id="red">-</button>
                        <input type="text" class="btn btn-default num" value="1" id="text" />
                        <button type="button" class="btn btn-default add" id="add">+</button>
                    </div>
            <div class="js">
              <div class="buy">
                立即购买
              </div>
              <div class="car">
                 添加购物车
              </div>
            </div>
            </div>
          
       </div>
    `
	$('.detal .contenier').html(str)
}
// 打开插件
function swiper() {
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 5,
		spaceBetween: 10,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		loop: true,
	})
}
// 放大镜功能
function fdj() {
	var smallimg = $('#box .swiper-slide img')
	var midimg = $('#box .show img')
	var bigmig = $('#box .enlarge  img')
	smallimg.click(function () {
		midimg.prop('src', $(this).prop('src'))
		bigmig.prop('src', $(this).prop('src'))
		smallimg.removeClass('active')
		$(this).addClass('active')
	})
	$('#box .show').hover(
		function () {
			$('#box .mask').css('display', 'block')
			$('#box .enlarge').css('display', 'block')
		},
		function () {
			$('#box .mask').css('display', 'none')
			$('#box .enlarge').css('display', 'none')
		}
	)
	$('#box .show').mousemove(function (e) {
		var x = e.pageX
		var y = e.pageY
		x = x - $('#box').offset().left - 275 / 2
		y = y - $('#box').offset().top - 275 / 2
		if (x < 0) x = 0
		if (x > 225) x = 275
		if (y < 0) y = 0
		if (y > 225) y = 275
		$('#box .mask').css({
			top: y,
			left: x,
		})
		bigmig.css({
			top: -(600 / 275) * y,
			left: -(600 / 275) * x,
		})
	})
}
// 浏览器进度条滚动事件
$(window).scroll(function () {
	if ($(window).scrollTop() > $('.tpxq').offset().top) {
		$('.xqdhl').css({
			display: 'block',
			position: 'fixed',
			top: 0,
		})
		return
	}
	$('.xqdhl').css({
		display: 'none',
	})
})
//未登录也可以添加添加购物车
function addcar(res) {
	$('#red').click(function () {
		if ($('#text').val() == 1) {
			return
		}
		var x = $('#text').val() - 1
		$('#text').val(x)
	})
	$('#add').click(function () {
		console.log(1)
		var x = $('#text').val() * 1 + 1
		$('#text').val(x)
	})
	$('#text').blur(function () {
		if ($(this).val() * 1 < 1) {
			$(this).val(1)
		}
	})
	$('.car').click(function () {
		var login = getCookie('login')
		// 先判断有没有登录如果登录了就加入个人账号的购物车
		if (login) {
			$.ajax({
				url: '/hx/addCarData.php',
				data: {
					username: login,
					id: str,
					name: res.item.name,
					num: $('#text').val(),
					img: `https:${res.item.listMainImage}`,
					price: res.highOriginPrice,
				},
				type: 'post',
				success: function (res) {
					console.log(res)
					res = JSON.parse(res)
					if (!res.code) {
						alert('添加失败')
						return
					}
					var x = confirm('添加成功是否查看购物车')
					if (!x) return
					location.href = './cart.html'
				},
			})
			return
		}
		// 没有登陆加入本地购物车，可以保存三小时
		cookie(res)
		var tz = confirm('添加成功是否查看购物车')
		if (!tz) return
		location.href = './cart.html'
	})
}
// 把商品信息添加到本地
function cookie(res) {
	console.log(1)
	var data = getCookie('data')
	if (!getCookie('data')) {
		var arr = []
		console.log(str)
		arr.push({
			id: str,
			name: res.item.name,
			num: $('#text').val(),
			img: `https:${res.item.listMainImage}`,
			price: res.highOriginPrice,
			status: false,
		})
		arr = JSON.stringify(arr)
		setCookie('data', 1, 180)
		localStorage.setItem('data', arr)
		return
	}
	data = JSON.parse(localStorage.getItem('data'))
	console.log(data)
	var x = data.filter(function (item) {
		return item.id == str
	})
	// console.log(x)
	if (x[0]) {
		data.forEach(function (item) {
			if (item.id == str) {
				item.num = $('#text').val() * 1 + item.num * 1
			}
		})
		data = JSON.stringify(data)
		localStorage.setItem('data', data)
		return
	}
	data.push({
		id: str,
		name: res.item.name,
		num: $('#text').val(),
		img: `https:${res.item.listMainImage}`,
		price: res.highOriginPrice,
		status: false,
	})
	data = JSON.stringify(data)
	localStorage.setItem('data', data)
}
